<template>
  <div class="container">
    <!-- 我的 头部-->
    <div class="header padding-24 space-between">
      <div class="h-back" @click="goBack">
        <img :src="back" alt />
      </div>
      <div class="title">{{title}}</div>
      <div class="h-right">
        <img :src="play" alt @click="showPlayer" />
      </div>
    </div>
    <div class="main-box">
      <div class="tips-mes fs-28">版权方要求，当前歌曲需付费下载，开通音乐包即可畅享</div>
      <div class="cost-list padding-24">
        <div
          class="list-item bg-f space-between padding-24"
          v-for="(item,index) in costlist"
          :key="index"
          :class="{current:index==cur}"
          @click="select(index,item)"
        >
          <span class="tips color-f center" v-if="index==0">推荐</span>
          <div class="left flex-column" v-if="item.message">
            <p class="fs-32">{{item.name}}</p>
            <p class="color-9">{{item.message}}</p>
          </div>
          <div class="left center-col" v-else>
            <p class="fs-32">{{item.name}}</p>
          </div>
          <div class="right">
            <p class="fs-36 color-r">&yen;{{item.discount}}</p>
            <p class="fs-26 color-9 order-price" v-if="item.price">&yen;{{item.price}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="singleSong" @click="toBuySong">
      <div class="items">
        <div class="left fs-32">{{singleBuy.message}}</div>
        <div class="right">
          <img :src="more" alt />
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="bottom fs-32" @click="buyMusicVip">立即开通</div>
    <payModel
      v-if="wantpay"
      :memberId="activeIndex"
      :totalPrice="totalPrice"
      :status="2"
      :wantpay="wantpay"
      @fn="getPayStatus"
    ></payModel>
  </div>
</template>

<script>
export default {
  name: "music-vip",
  data() {
    return {
      store: this.getStore(),
      title: "音乐会员",
      back: require("@/assets/index/back-mine.png"),
      play: require("@/assets/index/play-mine.png"),
      question: require("@/assets/index/question.png"),
      more: require("@/assets/index/back-pic.png"),
      activeIndex: 1,
      cur: 0,
      music_id: null, //音乐id
      costlist: [],
      singleBuy: {},
      wantpay: false, //是否去支付
      totalPrice: 9
    };
  },
  components: {},
  methods: {
    // 展示播放歌曲详情页
    showPlayer() {
      if (
        window.localStorage.getItem("musicMes") == null ||
        window.localStorage.getItem("musicMes") == "{}"
      ) {
        window.location.href = `https://www.metyou.wang/frontend/index.html#/index/find-music`;
      } else {
        // this.store.isFullPlay = true;
      }
    },
    select(i, item) {
      this.cur = i;
      this.totalPrice = item.discount / 1;
      this.activeIndex = item.membership_time_id;
      //console.log(item)
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 选择开通会员类型
    checkType(count) {
      this.activeIndex = count;
    },
    // 获取音乐会员列表
    getMusicList() {
      const url =
        this.$host1 + `home/vip/vipTimeList?music_id=` + this.music_id;
      var params = {};
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data, "---res.data--会员列表");
          if (res.data.code == 200) {
            let data = res.data.data;
            this.costlist = data.list;
            this.activeIndex = this.costlist[0].membership_time_id;
            this.singleBuy = {
              message: data.message,
              music_id: data.music_id,
              price: data.music_id
            };
          } else if (res.data.code == 0) {
            this.AlertWin(res.data.message);
            this.$router.push({ path: "/login" });
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取支付模态框的状态
    getPayStatus(e) {
      this.wantpay = e;
    },
    // 点击了立即开通按钮
    buyMusicVip() {
      this.wantpay = true;
      console.log(this.activeIndex, "---this.activeIndex");
    },
    // 去购买单曲
    toBuySong() {
      this.$router.push({
        path: "/index/single-buy",
        query: { id: this.music_id }
      });
    }
  },
  created() {
    this.music_id = this.$route.query.id;
    this.getMusicList();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  box-sizing: border-box;
  // 头部设置
  .header {
    background-color: #f8f8f8;
    .background {
      background-color: #f8f8f8;
    }
    .h-back {
      width: 0.15rem;
      height: 0.26rem;
      img {
        width: 100%;
      }
    }
    .title {
      font-size: 0.36rem;
      font-weight: bold;
      color: #444444;
    }
    .h-right {
      width: 0.38rem;
      height: 0.5rem;
      img {
        display: inline-block;
        width: 100%;
      }
    }
  }
  .main-box {
    // 版权样式设置
    .tips-mes {
      position: fixed;
      left: 0;
      top: 1rem;
      z-index: 99;
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      text-align: center;
      background-color: #fc5859;
      font-weight: 500;
      color: rgba(248, 248, 248, 1);
    }
    // 充值类型设置
    .type-list {
      padding: 0.24rem;
      box-sizing: border-box;
      .items {
        position: relative;
        display: flex;
        height: 1.6rem;
        justify-content: space-between;
        align-items: center;
        padding: 0.39rem 0.28rem 0.34rem 0.33rem;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 0.1rem;
        margin-bottom: 0.24rem;
        .time {
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
        }
        .left {
          .time {
            font-weight: bold;
            color: rgba(68, 68, 68, 1);
            margin-bottom: 0.28rem;
          }
          .text {
            display: flex;
            align-items: center;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
            .question {
              width: 0.36rem;
              height: 0.36rem;
              margin-left: 0.19rem;
              display: flex;
              img {
                width: 100%;
              }
            }
          }
        }
        .right {
          position: relative;
          font-weight: 800;
          color: rgba(244, 67, 73, 1);
          display: flex;
          flex-direction: column;
          .older-price {
            position: absolute;
            font-weight: 500;
            text-decoration: line-through;
            color: rgba(153, 153, 153, 1);
          }
        }
        .recommend {
          position: absolute;
          right: 0;
          top: 0;
          width: 0.92rem;
          height: 0.39rem;
          line-height: 0.4rem;
          text-align: center;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          background: linear-gradient(to bottom, #ffc43d, #ffb200);
          border-radius: 0 0 0.1rem 0.1rem;
        }
      }
      .active {
        background: rgba(244, 67, 73, 0.1);
        border: 3px solid rgba(244, 67, 73, 1);
      }
    }
    .cost-list {
      margin-top: 0.2rem;
      .list-item {
        position: relative;
        width: 100%;
        height: 1.6rem;
        border-radius: 0.1rem;
        margin-bottom: 0.2rem;
        //box-sizing: border-box;
        border: 0.01rem solid #fff;
        .left {
          height: 0.86rem;
        }
        .order-price {
          text-decoration: line-through;
        }
        .tips {
          width: 0.9rem;
          height: 0.4rem;
          position: absolute;
          right: 0;
          top: 0;
          background-color: #ffb200;
          border-radius: 0.1rem;
        }
      }
      .current {
        border: 0.015rem solid #f44349;
        background-color: #feecec;
      }
    }
  }
  // 单曲购买
  .singleSong {
    padding: 0 0.24rem;
    box-sizing: border-box;
    line-height: 1.6rem;
    height: 1.6rem;
    background-color: #fff;
    .items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.24rem;
      box-sizing: border-box;
      .left {
      }
      .right {
        img {
          width: 0.24rem;
          height: 0.4rem;
        }
      }
    }
  }
  // 底部按钮
  .bottom {
    width: 7.02rem;
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    background: rgba(84, 4, 121, 1);
    border-radius: 0.45rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    position: fixed;
    left: 50%;
    bottom: 0.16rem;
    transform: translate(-50%);
  }
}
</style>
